<template>
	<view class="container">
		<view class="header">
			<view>
				<image class="icon" src="/static/images/localIcon.png" />
				<text class="area"> 北京<text class="arrow-down"></text></text>
			</view>
			<input class="input" type="text" placeholder="搜文章/找大学/查专业">
			<image class="icon" src="/static/images/cataIcon.png" @tap="cata" />
			<image class="search-icon" src="/static/icon/search-icon.png" />
		</view>
		<view class="header-title">
			志愿填报智能推荐
		</view>
		<view class="header-desc">不浪费一分，科学填报，降低志愿风险</view>
		<view class="box">
			<view class="box-title"> -点灯前行高考志愿系统-</view>
			<view class="box-cell">高考省份 <input class="input" type="text" placeholder=""></view>
			<view class="box-cell">高考科目 <input class="input" type="text" placeholder=""></view>
			<view class="box-cell">高考分数 <input class="input" type="text" placeholder=""></view>
			<button class="button">开始填报</button>
		</view>
		<view class="nav">
			<view v-for="(item, index) in list" :key="item.name" class="box" @click="toLink(item.link)">
				<view class="box-cell">
					<image :src="`/svg/home-${index + 1}.svg`" alt="" />
					<view>
						{{ item.name }}
					</view>
				</view>
			</view>
		</view>
		<view style="padding: 30upx;">
			<scroll-view class="nav scroll-view" :scroll-x="true" :scrollbar="false">
				<view class="select-subject">
					<view>
						<image src="/static/images/selectSubject.png" mode="aspectFit" alt="" />
					</view>
					<view>
						<image src="/static/images/selectLocation.png" mode="aspectFit" alt="" />
					</view>
					<view>
						<image src="/static/images/selectUniversity.png" mode="aspectFit" alt="" />
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="container-box university">
			<view class="container-box-header">
				<view class="title">今日院校</view>
				<view class="more" @tap="tab('/pages/universityList/index')">查看更多></view>
			</view>
			<view class="nav">
				<view class="cell" v-for="item in universityList" @click="toLink('/pages/universityList/detail?id=' + item.id)"
					:key="item.id">
					<image src="/static/images/universityLogo.png" mode="aspectFit" />
					<view class="name">{{ item.name }}</view>
					<view>
						<text>高职高专</text> | &nbsp;<text>北京</text> | <text>综合</text>
					</view>
				</view>
			</view>
		</view>
		<view class="container-box major">
			<view class="container-box-header">
				<view class="title">今日专业</view>
				<view class="more">查看更多></view>
			</view>
			<view class="nav">
				<view v-for="item in majorList" :key="item.name" class="cell">
					{{ item.name }}
				</view>
			</view>
		</view>
		<view class="container-box news">
			<view class="container-box-header">
				<view class="title">高考资讯</view>
				<view class="more" @tap="toLink('/pages/news/index')">查看更多></view>
			</view>
			<view class="nav">
				<view v-for="item in imgList" :key="item.name" class="cell">
					<image :src="item.img" mode="aspectFit" />
					<view class="cell-right">
						<view class="title"> {{ item.title }}</view>
						<view class="time"> {{ item.updateTimeInSecond }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="board" v-if="modal" @touchmove.stop.prevent="moveHandle">
			<view class="gray" @tap="cata">
				<view class="cata-content" @tap.stop="">
					<view class="cata-header">
						<button class="button" @tap="toLink('/pages/login/index')">登录/注册</button>
						<view @tap="cata">×</view>
					</view>
					<view class="list">
						<view class="list-item" v-for="item in cataList" :key="item.name" @tap="toLink(item.link)">
							<view>{{ item.name }}</view>
							<view>{{ '>' }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { navList, universityList, majorList, imgList, cataList } from './indexData'
export default {
	data() {
		return {
			navList,
			universityList,
			majorList,
			cataList,
			imgList,
			list: [],
			modal: false,
			containerStyle: {} // 视图容器的样式
		}
	},
	mounted() {
		// 获取屏幕信息
		uni.getSystemInfo({
			success: (res) => {
				// 设置视图容器的宽高
				this.containerStyle = {
					width: res.windowWidth + "px",
					height: res.windowHeight + "px"
				};
			}
		});
	},
	methods: {
		toLink(url) {
			console.log(url)
			uni.navigateTo({
				url
			})
		},
		cata() {
			this.modal = !this.modal
		},
		moveHandle() {
			return false
		},
		tab(url) {
			uni.switchTab({
				url
			})
		}
	}
}
</script>

<style lang="less" scoped>
@primary: #d01117;


.container {
	background-image: linear-gradient(to bottom, #f64801, #ffffff);
	height: 800upx;
}

.header {
	display: flex;
	padding: 30upx;
	justify-content: space-between;
	position: relative;

	.icon {
		width: 33upx;
		height: 33upx;
		position: relative;
		top: 20upx;
	}

	.input {
		box-sizing: border-box;
		background-color: #fff;
		height: 70upx;
		width: 480upx;
		border-radius: 15upx;
		padding: 0 60upx;
	}

	.search-icon {
		width: 30upx;
		height: 30upx;
		position: absolute;
		left: 190upx;
		top: 50upx;
	}

	.area {
		color: white;
		font-size: 28upx;
		line-height: 33upx;
		position: relative;
		top: 15upx;
		left: 10upx;

		.arrow-down {
			border-top: 5px solid #fff;
			top: 25upx;
		}
	}
}

.header-title {
	text-align: center;
	color: #fff;
	font-size: 50upx;
	margin: 40upx 0 20upx 0;
}

.header-desc {
	color: #fff;
	text-align: center;
	font-size: 28upx;
	margin-bottom: 30upx;
}

.box {
	width: 690upx;
	height: 550upx;
	margin: 30upx auto;
	background-color: white;
	border-radius: 15upx;
	padding: 35upx;

	.box-title {
		text-align: center;
		font-size: 32upx;
		font-weight: 700;
		padding-bottom: 35upx;
	}

	.box-cell {
		display: flex;
		justify-content: space-between;
		width: 620upx;
		height: 80upx;
		border: 1upx solid #666666;
		border-radius: 15upx;
		line-height: 80upx;
		margin: 15upx auto;
		padding: 0 30upx;

		.input {
			height: 100%;
		}
	}

	.button {
		background-color: @primary;
		// background-color: #e7888b;
		color: #fff;
		margin: 30upx 0 0 0;
	}
}

.select-subject {
	display: flex;
}

.select-subject image {
	width: 370upx;
	height: 180upx;
}

.select-subject view {
	margin-right: 30upx;
}


.scroll-view {
	white-space: nowrap;
}

.container-box {
	background-color: white;
	padding: 30upx;
	margin: 20upx 0;

	.container-box-header {
		display: flex;
		justify-content: space-between;

		.title {
			font-size: 32upx;
			font-weight: 700;
		}

		.more {
			font-size: 26upx;
			color: #888888;
		}
	}
}

.university {
	.nav {
		font-size: 22upx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		text-align: center;
		color: #666666;

		.cell {
			width: 330upx;
			height: 260upx;
			margin: 10upx 0;
			border: 1upx solid #ccc;
			padding: 30upx 35upx 35upx 35upx;
			cursor: pointer;

			image {
				display: block;
				text-align: center;
				width: 85upx;
				height: 85upx;
				position: relative;
				left: 50%;
				transform: translateX(-50%);
			}
		}

		.name {
			font-size: 26upx;
			font-weight: 700;
			margin: 25upx 0 10upx 0;
			color: black;
		}

		text {
			margin: 0 5upx;
		}
	}
}

.major {
	.nav {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 20upx 0;

		.cell {
			width: 330upx;
			height: 90upx;
			margin: 10upx 0;
			line-height: 90upx;
			border-radius: 5upx;
			background-color: #eeebff;
			text-align: center;
		}
	}

}

.news {
	.nav {
		padding: 20upx 0;

		.cell {
			width: 100%;
			height: 160upx;
			margin-bottom: 30upx;
			display: flex;
			justify-content: space-between;
			border-radius: 5upx;
			text-align: start;

			image {
				width: 230upx;
				height: 160upx;
			}

			.cell-right {
				width: 450upx;
				padding: 20upx 0;

				.title {
					font-size: 26upx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.time {
					font-size: 24upx;
					color: #888888;
				}
			}
		}
	}

}

.board {
	position: absolute;
	background-color: #fff;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;

	.gray {
		height: 100vh;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		position: fixed;
	}
}

.cata-content {
	width: 564upx;
	height: 100%;
	background-color: white;
	position: absolute;
	right: 0;
	padding: 30upx;

	.cata-header {
		display: flex;
		justify-content: space-between;
		font-size: 50upx;

		.button {
			margin: 0;
			background-color: @primary;
			color: white;
			width: 180upx;
			height: 65upx;
			font-size: 26upx;
			line-height: 65upx;
		}
	}

	.list {
		padding: 20upx;

		.list-item {
			display: flex;
			justify-content: space-between;
			height: 90upx;
			line-height: 90upx;
			font-size: 28upx;
			border-bottom: 1upx solid #e8e8e8;
		}
	}
}
</style>
